Open topic with navigation

IFrame Components

The IFrame component enables you to embed web content in your page. To embed content from the web, set the URL property to the URL of the desired content. You can also embed files from your projects assets folder, if they are a filetype that can be rendered by a browser. Note that some web content is restricted from rendering in an IFrame by its provisioner.

Example: Changing the Contents of an IFrame

This simple example enables the user to press a button to change the content that is displayed in an IFrame, as shown in the following figure.

In the dataflow of the IFrame, a Case block accepts the selection index of a button group and uses that value to determine the URL that is output to the URL property of the IFrame, which determines the content that is displayed. The following figure shows how the Case block is bound and defined.

To implement this example, perform the following steps:

  1. Add an IFrame to the stage: Right-click the stage and choose Insert > Components > IFrame.
  2. To create a button group, add a group to the stage and populate it with text components, one for each item of content you want to display in the IFrame. Style the text components as desired and set their Text property to a unique identifier or number that you want displayed on the button.
  3. Open the IFrame dataflow and add a Case block. Define its settings as follows:

To verify that you have implemented the example correctly, close the dataflow and click Preview. Verify that, when you click a button in the group, the IFrame displays the desired content.

Example: Embedding JavaScript in an IFrame

The following video demonstrates how to pass parameterized data to JavaScript that is running in an IFrame component.

In this example, you define variables in the JavaScript file and add corresponding parameters to a symbol, enabling you to use the properties as input to the script. The steps are as follows:

  1. Copy the example HTML below, paste it into a new text document, and save the document as a file named "test.html".
    2. ClosedExample HTML 
    <!DOCTYPE html>
    <!--  https://github.com/web-animations/web-animations-js -->
    <html>
    <body>
    <div class="pulse" style="width:150px;">Hello world!</div>
    <script type='text/javascript' src='dgframe.js'></script>
    <script type='text/javascript'>
    //DEFINE VARIABLES
    var duration = 500;
    var header = "Hello world!";
    var element = document.querySelector(".pulse");
    var animate = {
    direction: "alternate",
    duration: 500,
    iterations: Infinity
    };
    //DEFINE DYNAMIC PROPERTIES
    var dgParams = {
    "duration": function(val) {
    if (typeof(val) == "number") {
    duration = val;
    }
    },
    "header": function(val) {
    if (typeof(val) == "string") {
    header = val;
    }
    }
    };
     
    //APPLY TEXT AND ANIMATION TO ELEMENT
    element.textContent = header;
    element.animate([
    {opacity: 0.5, transform: "scale(0.5)"},
    {opacity: 1.0, transform: "scale(1)"}
    ], animate);
     
    //DEFINE ON LOAD SCRIPT
    window.onload = function() {
    //DEFINE REQUEST ANIMATION FRAME FROM BROWSER
    window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    function (callback) {
    window.setTimeout(callback, 1000 / 60);
    };
    })();
     
    //DEFINE WHAT HAPPENS ON LOOP
    function update() {
    if (element.textContent != header) {
    element.textContent = header;
    }
    if (animate.duration != duration) {
    animate.duration = duration;
    element.animate([
    {opacity: 0.5, transform: "scale(0.5)"},
    {opacity: 1.0, transform: "scale(1)"}
    ], animate);
    }
    }
     
    //DEFINE THE LOOP ITSELF
    function loop() {
    requestAnimFrame(loop);
    update();
    }
     
    loop();
    }
    </script>
    </body>
    </html>
  2. Copy the example JavaScript below, paste it into a new text document, and save the document as a file named "dgframe.js".
    3. ClosedExample JavaScript 
    // test if a parameter value is a table
    function dgIsParamTable(val){
    return (val != null && typeof(val)=='object' && val.hasOwnProperty('cols') && val.hasOwnProperty('rows'));
    }
     
     
    // interface to the application
    function onDGFrameMessage(e){
    var data = e.data;
    if (typeof(data)=='object'){
    if (data.hasOwnProperty('dgIframeInit')){
    dgIframeId = data['dgIframeInit'];
    if (window.parent != null){
    // the first post back shouldn't contain any data change
    window.parent.postMessage({'dgIframe':dgIframeId},'*');
    }
    } else if (data.hasOwnProperty('dgIframeUpdate')){
    var updates = data['updates'];
    if (typeof(updates)=='object'){
    if (typeof(dgParams) == 'object'){
    for (key in dgParams){
    if (updates.hasOwnProperty(key)){
    dgParams[key](updates[key]);
    }
    }
    }
     
    if (typeof(dgParamsUpdated) == 'function'){
    dgParamsUpdated();
    }
    }
    }
    }
    }
    window.addEventListener('message',onDGFrameMessage);
     
    // push parameter changes back
    function dgUpdateParams(changes) {
    if (dgIframeId != null) {
    window.parent.postMessage({'dgIframe':dgIframeId, changes:changes},'*');
    } else {
    throw 'dgUpdateParams failed, handshake not finished';
    }
    }
  3. To add the test.html and dgframe.js files to your Solution Builder project, drag them from a file explorer to the Project pane.
  4. To create an IFrame component, drag the HTML file from the Project panel to the stage.
  5. Right-click the IFrame component, select Convert to Symbol, and specify a name for the symbol.
  6. Right-click the symbol and select Edit Properties. The Symbol Parameters dialog is displayed.
  7. Add two parameters to the symbol: a string parameter named "header" and a number parameter named "duration". (To add parameters, drag them from the left-hand list into the dialog. To name them, double-click the data type label to the left of the parameter you added.)
  8. To exit symbol editing, click the check mark at the top right corner of the stage. Check the Symbol section of the Properties pane to verify that your newly-added properties are displayed.

To verify that you have implemented the example correctly, change the header and duration properties and observe the effect on the animated text that is displayed in the IFrame.